<html>
<head>
<title>Psych</title>

		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.15.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/date.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>

</head>

<body>

	<style>
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	</style>

<script type="text/javascript">

$(document).ready(function(){
 
	$("#status").append("Loading data.");

	var dataLoadCurrent=0;
	var dataLoadTotal=$(".autopop").length;
	
	function psychCalc() {
		var sDate=Date.parse($("#startDate").attr('value')).toString("yyyy-MM-dd");
		var eDate=Date.parse($("#endDate").attr('value')).toString("yyyy-MM-dd");
		$.ajax({url: "getData.php", data:{ shockType: $("#shockType").attr('value'),
							  startDate: sDate,
							  endDate: eDate,
							  state: $("#state").attr('value'),
							  regionType: $("#regionType").attr('value'),
							  regionName: $("#regionName").attr('value'),
							  measurementType: $("#measurementType").attr('value'),
							  metric: $("#metric").attr('value')
							 },
				success: function(message) {
					  		  $("#status").html(message);	
				},
				async:false	    
    		});
  		$.get("processData.html",{filename: $_SERVER['SERVER_ADDR']}, function(message) {
  							  		  $("#status").append(message);	
  							 } 	    
      		); 
	}  
	
	function populateTag(fieldName) {
      $.get("getFieldListing.php",{field: fieldName}, function(listing) { 	    
  		$( "#" + fieldName ).autocomplete({
  			source: listing.split("|"),
			minLength: 0,
			delay: 0
  		});
		dataLoadSuccess();			  
  	 });

	}
	
	/* I count up how many AJAX queries I conduct.
	 * If equal to the total number of input fields, I've loaded the data.
	 * After the initial load, I can reset dataLoadTotal to track
	 *  additional loading.
	*/
	function dataLoadSuccess() {
		dataLoadCurrent++;
		if (dataLoadCurrent==dataLoadTotal) {
			$("#status").html("Data loaded.");
		} else {
			$("#status").append(".");
		}
	}

	/* create date pickers */
	$(".datepick").each(function() {
		  $(this).datepicker();
	  }
	);

	/*Populate boxes */
	$(".autopop").each(function() {
		  $(this).focus(function() {$(this).autocomplete( "search" , ""  );});
		  populateTag(this.id);
	  }
	);
	
	/*button*/
	$("#calc").button();
	$("#calc").click(psychCalc);

 });


</script>

<div class="title">
Pysch
</div>
<br/>
<div class="ui-widget">
	I would like to know the effect of the <input id="shockType" class="autopop" size="20"><br/>
	that took place between <input id="startDate" type="text" class="datepick"> <label for="endDate">and </label><input id="endDate" type="text" class="datepick"><br/>
	in the state of <input id="state" class="autopop" size="2">, in the <input id="regionType" class="autopop" size="20"> of <input id="regionName" class="autopop" size="20"><br/>
	on the <input id="measurementType" class="autopop" size="20"> of <input id="metric" class="autopop" size="20"> in that area.<br/>
	<input type="submit" id="calc" value="Please tell me"><br/> 
</div>

<br/>
<br/>
Status: <span id="status"></span>

</body>
</html>
